<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <h1>CSS 选择器</h1>

    <h2>元素选择器</h2>
    按照html的标签进行匹配
    <pre>
div {
    background-color: black;
}

h1 {
    color: blue;
}

h2 {
    color: silver;
}
    </pre>

    <h2>通配符选择器</h2>
    该选择器可以与任何元素匹配
    <pre>
* {color:red;}
    </pre>

    <h2>类选择器</h2>

    <h3>展示效果</h3>

    <iframe width="100%" src="./selector/selector_class.html" height="350px" scrolling="no"></iframe>

    <h3>具体代码</h3>
    <pre>
&lt;!--布局文件--&gt;
&lt;span class=&quot;color&quot;&gt;我是一个span标签, class=&quot;color&quot;&lt;/span&gt;

&lt;p class=&quot;color&quot;&gt;我是一个p标签, class=&quot;color&quot;&lt;/p&gt;

&lt;p&gt;我是一个div，class=&quot;box_red&quot;&lt;/p&gt;
&lt;div class=&quot;box_red&quot;&gt;
&lt;/div&gt;
&lt;p&gt;我是一个div，class=&quot;box_blue&quot;&lt;/p&gt;
&lt;div class=&quot;box_blue&quot;&gt;
&lt;/div&gt;
&lt;p&gt;我是一个div，class=&quot;box_red box_blue&quot;&lt;/p&gt;
&lt;div class=&quot;box_red box_blue&quot;&gt;
&lt;/div&gt;

&lt;!--css文件--&gt;
/* 类选择器 */
.color {
    color: red;
}

/*匹配既是p标签，又有color类的元素*/
p.color {
    color: blue;
}

.box_red {
    background-color: red;
    width: 20px;
    height: 20px;
}
.box_blue {
    background-color: blue;
    width: 30px;
    height: 10px;
}
/*匹配同时含有box_red box_blue类的元素*/
.box_red.box_blue {
    background-color: purple;
    width: 10px;
    height: 30px;
}
    </pre>

    <h2>ID 选择器</h2>
    ID 选择器前面有一个 # 号。
    <pre>
&lt;!-- 布局文件 --&gt;
&lt;p id=&quot;intro&quot;&gt;This is a paragraph of introduction.&lt;/p&gt;
&lt;!-- CSS文件--&gt;
#intro {font-weight:bold;}
    </pre>


    <h2>属性选择器</h2>
    <h3>展示效果</h3>

    <iframe width="100%" src="./selector/selector_attribute.html" height="100px" scrolling="no"></iframe>

    <h3>具体代码</h3>
    <pre>
&lt;!--布局文件--&gt;
&lt;a&gt;我是一个什么都没有的标签&lt;/a&gt;

&lt;br /&gt;

&lt;a href=&quot;https://www.w3school.com.cn/css/css_selector_attribute.asp&quot;&gt;我是一个有href的a标签&lt;/a&gt;

&lt;br /&gt;
&lt;a href=&quot;https://www.w3school.com.cn/css/css_selector_attribute.asp&quot; title=&quot;属性选择器&quot;&gt;我是一个有href、title的a标签&lt;/a&gt;

&lt;br /&gt;
&lt;!--CSS文件--&gt;
/*匹配所有a标签*/
a {
    color: red;
}

/*匹配带有href属性的a标签*/
a[href] {
    color: blue;
}

/*匹配同时带有href、title属性的a标签*/
a[href][title] {
    color: green;
}
    </pre>


    <h2>后代选择器</h2>

    <pre>
&lt;!--布局文件--&gt;
&lt;h1&gt;This is a &lt;em&gt;important&lt;/em&gt; heading&lt;/h1&gt;
&lt;p&gt;This is a &lt;em&gt;important&lt;/em&gt; paragraph.&lt;/p&gt;

&lt;!--CSS文件--&gt;
/*匹配h1中的em标签, 且不论em的嵌套层次多深, 都能匹配。*/
h1 em {color:red;}
    </pre>
    <h2>子元素选择器</h2>

    <pre>
&lt;!--布局文件--&gt;
&lt;h1&gt;This is a &lt;em&gt;important&lt;/em&gt; heading&lt;/h1&gt;
&lt;p&gt;This is a &lt;em&gt;important&lt;/em&gt; paragraph.&lt;/p&gt;

&lt;!--CSS文件--&gt;
/*匹配h1中的em标签, 只匹配一层布局中的所有em标签*/
h1 > em {color:red;}
    </pre>

    <h2>相邻兄弟选择器</h2>

    <pre>
&lt;!-- 布局文件 --&gt;
&lt;div&gt;
    &lt;ul&gt;
        &lt;li&gt;List item 1&lt;/li&gt;
        &lt;li&gt;List item 2&lt;/li&gt;
        &lt;li&gt;List item 3&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
&lt;!-- CSS文件 --&gt;
/*匹配li的兄弟节点，这里只有item2 item3会变粗体， 相邻兄弟选择器不会匹配自身，所以item1无变化*/
li + li {font-weight:bold;}
    </pre>


    <h2>选择器分组</h2>

    <pre>
&lt;!-- 可以将 多个拥有同样属性的 选择器 进行合并--&gt;
html {color:blue;}
h1 {color:blue;}
h2 {color:blue;}

html,h1,h2 {
    color:blue;
}
    </pre>


    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank" href="https://www.w3school.com.cn/css/css_selector_type.asp">CSS 元素选择器</a></li>
        <li><a target="_blank" href="https://www.w3school.com.cn/css/css_selector_grouping.asp">CSS 分组</a></li>
        <li><a target="_blank" href="https://www.w3school.com.cn/css/css_selector_class.asp">CSS 类选择器详解</a></li>
        <li><a target="_blank" href="https://www.w3school.com.cn/css/css_selector_id.asp">CSS ID 选择器详解</a></li>
        <li><a target="_blank" href="https://www.w3school.com.cn/css/css_selector_attribute.asp">CSS 属性选择器详解</a></li>
        <li><a target="_blank" href="https://www.w3school.com.cn/css/css_selector_descendant.asp">CSS 后代选择器</a></li>
        <li><a target="_blank" href="https://www.w3school.com.cn/css/css_selector_child.asp">CSS 子元素选择器</a></li>
        <li><a target="_blank" href="https://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp">CSS 相邻兄弟选择器</a></li>
    </ul>
</body>

</html>